<!-- 延期任务/停工任务 -->
<template>
  <div class="content">
    <el-card class="box-card">
      <el-tabs v-model="activeName">
        <el-tab-pane label="延期任务" name="first"></el-tab-pane>
        <el-tab-pane label="停工任务" name="second"></el-tab-pane>
      </el-tabs>
      <el-table :data="tableData" style="width: 100%" height="200">
        <el-table-column prop="projectName" label="项目名称" width="150"></el-table-column>
        <el-table-column prop="taskName" label="任务名称"></el-table-column>
        <el-table-column prop="person" label="责任人"></el-table-column>
        <el-table-column prop="endTime" label="计划结束"></el-table-column>
        <el-table-column prop="progess" label="进度"></el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: 'first',
      tableData: [
        {
          projectName: '风光一体化防沙治沙',
          taskName: '防沙治沙',
          person: '张XX',
          endTime: '2022-09-20',
          progess: '70%'
        },{
          projectName: '三北六期',
          taskName: '绿化改造',
          person: '郝XX',
          endTime: '2022-09-20',
          progess: '0%'
        },{
          projectName: '蚂蚁森林',
          taskName: '苗木栽培',
          person: '刘XX',
          endTime: '2022-09-20',
          progess: '100%'
        },{
          projectName: '蓝旗机器人造林',
          taskName: '机器人造林',
          person: '朱XX',
          endTime: '2022-09-20',
          progess: '50%'
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
